<template>
  <div class="movie-hall page">
    <div class="home-top-bar">
      <span>会员视频</span>
    </div>
    <van-tabs background="linear-gradient(to right, rgb(227, 138, 251), rgb(250, 89, 181))" color="#f2f2f5"
              title-active-color="#fff" title-inactive-color="#fff" @change="onChange">
      <van-tab v-for="item in categories" :key="item.id" :name="item.id" :title="item.name"/>
    </van-tabs>
    <van-pull-refresh ref="pullRefresh" v-model="refresh" @refresh="onRefresh" :success-text="refreshMsg"
                      success-duration="3000"
                      :disabled="!allowPulLRefresh" style="height: 100%">
      <template #default>
        <ul
            v-if="videos && videos.length > 0"
            class="hot-recommend-div"
            v-infinite-scroll="loadData"
            :infinite-scroll-disabled="(page - 1) * 8 + videos.length >= total"
            @scroll="onScroll">
          <li class="list-item" v-for="item in videos" @click="gotoDetail(item.id)" :key="item.id"
              style="padding: 10px;">
            <div class="movie-list-item movie_tiem_100"
            ><img class="bgImg"
                  v-lazy="item.vod_pic"
            >
              <div class="movie-list-item-bottom">
                <div class="movie-time-div"><span
                >{{ item.vod_name }}</span><span
                >播放:{{ item.vod_score_num }}</span></div>
              </div>
            </div>
          </li>
          <li class="load_more"
              v-if="(page - 1) * 8 + videos.length < total"
              v-loading="loading"
              element-loading-text="正在加载更多数据"
              element-loading-spinner="el-icon-loading"
              element-loading-background="rgba(255, 255, 255, 0)"></li>
        </ul>
        <div v-else class="emptyView">
          <img class="emptyViewimg" :src="require('@assets/img/base/kong.png')">
          <span class="emptyViewText">暂无数据</span>
        </div>
      </template>
    </van-pull-refresh>
    <!-- <van-popup v-model="show" style="z-index: 2002; width: 90%; height: 150px;">
      <ul class="lines-ul">
        <li>
          <div class="active-url">线路1</div>
        </li>
        <li>
          <div class="">线路2</div>
        </li>
        <li>
          <div class="">线路3</div>
        </li>
        <li>
          <div class="">线路4</div>
        </li>
        <li>
          <div class="">线路5</div>
        </li>
      </ul>
    </van-popup> -->
  </div>
</template>
<script>
import {videoCategory, videoList} from "@api/Video";

export default {
  name: "Movie",
  data: function () {
    return {
      allowPulLRefresh: true,
      refresh: false,
      refreshMsg: "刷新成功",
      currentId: 0,
      page: 1,
      total: 0,
      videos: [],
      categories: [],
      show: false,
      loading: false,
      noMore: false,
      swiperOption: {
        loop: false,
        direction: 'vertical',
        autoplay: true,
        autoHeight: true,
        // simulateTouch: true,//鼠标模拟手机触摸。默认为true，Swiper接受鼠标点击、拖动。
        // 显示分页
        pagination: {
          el: ".swiper-pagination",
          clickable: true //允许分页点击跳转
        },
        // 设置点击箭头
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev"
        }
      }
    };
  },
  created() {
    this.initCategory();
  },
  mounted: function () {

  },
  methods: {
    loadData() {
      this.loading = true;
      this.page++;
      videoList(this.currentId, this.page).then(v => {
        this.loading = false;
        this.total = v.data.count;
        this.videos = this.videos.concat(this.processUrl(v.data.data));
      }).catch(() => {
        this.loading = false;
        this.total = 0;
        this.videos = [];
      })
    },
    initCategory: function () {
      videoCategory().then(v => {
        this.categories = v.data;
        if (this.categories.length > 0) {
          this.currentId = this.categories[0].id;
          this.initVideoList(this.currentId);
        }
      })
    },
    onChange: function (id) {
      this.page = 1;
      this.currentId = id;
      this.initVideoList(this.currentId);
    },
    initVideoList: function (id) {
      videoList(id, this.page).then(v => {
        this.total = v.data.count;
        this.videos = this.processUrl(v.data.data);
      }).catch(() => {
        this.total = 0;
        this.videos = [];
      })
    },
    onRefresh: function () {
      this.page = 1;
      this.refresh = true;
      videoList(this.currentId, this.page).then(v => {
        this.refreshMsg = "刷新成功"
        this.refresh = false;
        this.total = v.data.count;
        this.videos = v.data.data;
      }).catch(() => {
        this.refreshMsg = "刷新失败"
        this.refresh = false;
        this.total = 0;
        this.videos = [];
      })
    },
    gotoDetail: function (id) {
      this.$router.push({
        name: "MovieDetail",
        query: {
          id
        }
      })
    },
    onScroll: function (event) {
      let target = event.target;
      if (!target) return;
      this.allowPulLRefresh = !target.scrollTop
    },
    processUrl: function (list) {
      let videoList = [];
      list.forEach(item => {
        if (item.vod_pic.startsWithFromArray(window.SERVER.IMG_REPLACE)){
          item.vod_pic = item.vod_pic.replaceAllFromArray(
            window.SERVER.IMG_REPLACE,
            window.SERVER.IMG_HOST
          );
        }
        videoList.push(item);
      });
      return videoList;
    }
  }
};
</script>
<style>
:root {
  --van-black: #000;
  --van-white: #fff;
  --van-gray-1: #f7f8fa;
  --van-gray-2: #f2f3f5;
  --van-gray-3: #ebedf0;
  --van-gray-4: #dcdee0;
  --van-gray-5: #c8c9cc;
  --van-gray-6: #969799;
  --van-gray-7: #646566;
  --van-gray-8: #323233;
  --van-red: #ee0a24;
  --van-blue: #1989fa;
  --van-orange: #ff976a;
  --van-orange-dark: #ed6a0c;
  --van-orange-light: #fffbe8;
  --van-green: #07c160;
  --van-gradient-red: linear-gradient(90deg, #ff6034, #ee0a24);
  --van-gradient-orange: linear-gradient(90deg, #ffd01e, #ff8917);
  --van-primary-color: var(--van-blue);
  --van-success-color: var(--van-green);
  --van-danger-color: var(--van-red);
  --van-warning-color: var(--van-orange);
  --van-text-color: var(--van-gray-8);
  --van-active-color: var(--van-gray-2);
  --van-active-opacity: 0.7;
  --van-disabled-opacity: 0.5;
  --van-background-color: var(--van-gray-1);
  --van-background-color-light: #fafafa;
  --van-text-link-color: #576b95;
  --van-padding-base: 0.10667rem;
  --van-padding-xs: 0.21333rem;
  --van-padding-sm: 0.32rem;
  --van-padding-md: 0.42667rem;
  --van-padding-lg: 0.64rem;
  --van-padding-xl: 0.85333rem;
  --van-font-size-xs: 0.26667rem;
  --van-font-size-sm: 0.32rem;
  --van-font-size-md: 0.37333rem;
  --van-font-size-lg: 0.42667rem;
  --van-font-weight-bold: 500;
  --van-line-height-xs: 0.37333rem;
  --van-line-height-sm: 0.48rem;
  --van-line-height-md: 0.53333rem;
  --van-line-height-lg: 0.58667rem;
  --van-base-font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Segoe UI, Arial, Roboto, "PingFang SC", "miui", "Hiragino Sans GB", "Microsoft Yahei", sans-serif;
  --van-price-integer-font-family: Avenir-Heavy, PingFang SC, Helvetica Neue, Arial, sans-serif;
  --van-animation-duration-base: 0.3s;
  --van-animation-duration-fast: 0.2s;
  --van-animation-timing-function-enter: ease-out;
  --van-animation-timing-function-leave: ease-in;
  --van-border-color: var(--van-gray-3);
  --van-border-width-base: 0.02667rem;
  --van-border-radius-sm: 0.05333rem;
  --van-border-radius-md: 0.10667rem;
  --van-border-radius-lg: 0.21333rem;
  --van-border-radius-max: 26.64rem;
  --van-tab-text-color: var(--van-gray-7);
  --van-tab-active-text-color: var(--van-text-color);
  --van-tab-disabled-text-color: var(--van-gray-5);
  --van-tab-font-size: var(--van-font-size-md);
  --van-tab-line-height: var(--van-line-height-md);
  --van-tabs-default-color: var(--van-danger-color);
  --van-tabs-line-height: 1.17333rem;
  --van-tabs-card-height: 0.8rem;
  --van-tabs-nav-background-color: var(--van-white);
  --van-tabs-bottom-bar-width: 1.06667rem;
  --van-tabs-bottom-bar-height: 0.08rem;
  --van-tabs-bottom-bar-color: var(--van-danger-color)
}
</style>
<style scoped>
::v-deep .el-loading-text, ::v-deep .el-icon-loading {
  color: var(--van-nav-bar-title-text-color);
}

::v-deep .van-popup--center {
  border-radius: 0.42667rem;
  background-color: #f5dcf1;
  overflow: hidden;
}

::v-deep .van-tab {
  position: relative;
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 0 var(--van-padding-base);
  color: var(--van-tab-text-color);
  font-size: var(--van-tab-font-size);
  line-height: var(--van-tab-line-height);
  cursor: pointer
}

::v-deep .van-tab--active {
  color: var(--van-tab-active-text-color);
  font-weight: var(--van-font-weight-bold);
}

::v-deep .van-tabs {
  position: relative
}

::v-deep .van-tabs__wrap {
  overflow: hidden
}

::v-deep .van-tabs__wrap--scrollable .van-tab {
  flex: 1 0 auto;
  padding: 0 var(--van-padding-sm)
}

::v-deep .van-tabs__wrap--scrollable .van-tabs__nav {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch
}

::v-deep .van-tabs__wrap--scrollable .van-tabs__nav::-webkit-scrollbar {
  display: none
}

::v-deep .van-tabs__nav {
  position: relative;
  display: flex;
  background-color: var(--van-tabs-nav-background-color);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none
}

::v-deep .van-tabs__nav--line {
  box-sizing: content-box;
  height: 100%;
  padding-bottom: .4rem
}

::v-deep .van-tabs__nav--complete {
  padding-right: var(--van-padding-xs);
  padding-left: var(--van-padding-xs)
}

::v-deep .van-tabs__nav--card .van-tab {
  color: var(--van-tabs-default-color);
  border-right: var(--van-border-width-base) solid var(--van-tabs-default-color)
}

.van-tabs__nav--card .van-tab:last-child {
  border-right: none
}

.van-tabs__nav--card .van-tab.van-tab--active {
  color: var(--van-white);
  background-color: var(--van-tabs-default-color)
}

.van-tabs__line {
  position: absolute;
  bottom: .4rem;
  left: 0;
  z-index: 1;
  width: var(--van-tabs-bottom-bar-width);
  height: var(--van-tabs-bottom-bar-height);
  background-color: var(--van-tabs-bottom-bar-color);
  border-radius: var(--van-tabs-bottom-bar-height)
}

.van-tabs--line .van-tabs__wrap {
  height: var(--van-tabs-line-height)
}

.van-tabs--card > .van-tabs__wrap {
  height: var(--van-tabs-card-height)
}

.movie_tiem_2 .movie-time-div, .movie_tiem_3 .movie-time-div, .movie_tiem_4 .movie-time-div {
  background-color: transparent !important
}

.movie_tiem_2 .movie-time-div span, .movie_tiem_3 .movie-time-div span, .movie_tiem_4 .movie-time-div span {
  color: #fff !important;
  font-weight: 700
}

.widthCmp .movie-time-div span:first-child {
  width: 7.46667rem !important
}

.movie-list-item .bgImg {
  height: 100% !important;
  display: inline-block;
  border-radius: .13333rem !important
}

.movie-list-item .movie-time-div {
  color: #fff;
  border-radius: 0 0 .13333rem .13333rem
}

.movie-list-item .movie-time-div span:first-child {
  overflow: hidden;
  white-space: nowrap
}

.movie-list-item {
  width: 4.66667rem;
  height: 3.73333rem;
  border-radius: .13333rem;
  background-color: #fff;
  margin-bottom: .26667rem;
  position: relative
}

.movie-list-item .bgImg {
  width: 100%;
  border-radius: .13333rem .13333rem 0 0;
  -o-object-fit: cover;
  object-fit: cover
}

.movie-list-item .movie-list-item-bottom {
  position: absolute;
  width: 100%;
  bottom: 0
}

.movie-list-item .movie-list-item-bottom > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 .13333rem
}

.movie-list-item .movie-list-item-bottom .movie-time-div {
  height: .53333rem;
  background-color: rgba(0, 0, 0, .4)
}


.movie-list-item .movie-list-item-bottom .movie-time-div span:first-child {
  width: 2.13333rem
}

.movie-list-item .movie-list-item-bottom .movie-title-div p {
  overflow: hidden;
  white-space: nowrap;
  color: #fff
}

.movie-list-item .movie-list-item-bottom .movie-title-div span {
  font-size: .42667rem;
  color: #fff
}

.hot-recommend-div {
  width: calc(100% - .27rem);
  height: calc(100% - .26667rem);
  margin-top: .26667rem;
  margin-left: .27rem;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-wrap: wrap;
  overflow-y: scroll;
}

.hot-recommend-div .list-item {
  width: 50%;
  height: 4rem;
  display: flex;
  justify-content: space-between
}

.hot-recommend-div .load_more {
  width: calc(100% - .27rem);
  height: 2rem;
}

.movie-list-tab .no-data {
  height: calc(100vh - 4rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center
}

.movie-list-tab .no-data img {
  width: 50%;
  height: 50vw;
  -o-object-fit: contain;
  object-fit: contain
}

.movie-list-tab .no-data span {
  font-size: .32rem;
  color: #999
}

.movie-hall {
  display: flex;
  flex-direction: column;
  bottom: 1.33333rem;
  height: calc(100vh - 1.33333rem);
  background: #f2f2f5
}

.movie-hall .no-data {
  height: calc(100% - 1.33333rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center
}

.movie-hall .no-data img {
  width: 50%;
  -o-object-fit: contain;
  object-fit: contain
}

.movie-hall .no-data span {
  font-size: .32rem;
  color: #999
}

.van-tabs__nav .van-tab, .van-tabs__nav .van-tab--active {
  color: #fff
}

.van-tabs__nav .van-tabs__line {
  background-color: #fff
}


.lines-ul {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-wrap: wrap;
  margin: .13333rem 0 0
}

.lines-ul li {
  width: 17%;
  height: .8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: .05333rem
}

.lines-ul li .active-url {
  background-color: #fa59b5
}

.lines-ul li > div {
  width: 2.13333rem;
  height: .64rem;
  background-color: #e38afb;
  border-radius: .32rem;
  color: #fff;
  font-size: .37333rem;
  display: flex;
  align-items: center;
  justify-content: center
}

</style>
